<template>
  <div>
    分类管理
    <el-table
      :data="data"
      row-key="id"
      border
      @selection-change="handleSelectionChange"
      :tree-props="{ children: 'children' }"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column prop="catename" label="名称" sortable width="180">
      </el-table-column>
      <el-table-column prop="fid" label="级别" sortable width="180">
      </el-table-column>
      <el-table-column prop="isShow" label="显示" sortable width="180">
      </el-table-column>
      <el-table-column prop="id" label="分类排序" sortable width="180">
      </el-table-column>
      <el-table-column prop="paymentcode" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="go(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="delet(scope.row.id)"
            >删除</el-button
          >
          <!-- ?fid=查询不影响路径 -->
          <el-button
            type="text"
            size="small"
            
            @click="$router.push('/admin/produce/addCategory?fid='+scope.row.id )"
            >添加子分类</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="提示"
      :visible="dialogVisible"
      width="70%"
      :show-close="false"
    >
      <el-form
        style="width: 50%"
        :model="info"
        ref="ruleFrom"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="分类名称" prop="catename">
          <el-input v-model="info.catename"></el-input>
        </el-form-item>
        <hr/>
        <el-form-item label="商品分类" prop="catenName">
          <el-cascader
          v-model="cat"
            ref="cas"
            :options="data"
            :props="{ expandTrigger: 'hover', label: 'catename', value: 'id' }"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="排序" prop="id">
          <el-input v-model="info.id"></el-input>
        </el-form-item>
        <el-form-item label="级别" prop="fid">
          <el-input v-model="info.fid"></el-input>
        </el-form-item>
        <!-- <el-form-item label="显示" prop="isShow" width="100">
        <el-input v-model="staff.isShow"></el-input>
      </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
          putCate();
            getcategory();
            dialogVisible = false;
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetCategory,PutCate ,DeleteCate,GetCateGory} from "@/api/produce";
export default {
  data() {
    return {
      data: [],
      cat:[],
      dialogVisible: false,
      info:{
        cateName:'',
        catename:'',
        id:'',
        fid:'',
      },
    };
  },
  created() {
    this.getcategory();
  },
  methods: {
    //删除
    delet(id) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    DeleteCate(id).then((res) => {
                        if (res && res.data && res.data.code === 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            // 列表
                            this.getcategory();
                        } else {
                            this.$message({
                                type: "success",
                                message: res.data.msg || "删除失败",
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    //编辑
    putCate(){
        PutCate(this.info)
        .then(res=>{
          console.log(res);
            if (res.data&& res.data.code === 0) {
                this.$message({
                    type: "success",
                    message: "编辑成功",
                });
            }
        })
    },
    //编辑
    go(row) {
      this.ewdiID = row;
      // eslint-disable-next-line no-unused-vars
      function getParent(id,list){
        var temp = [];
        for(var i=0;i<list.length;i++){
          if(list[i].id===id){
            temp.push(list[i].id);
            return temp;
          }else{
            if(list[i].children){
               var re = getParent(id,list[i].children);
               if(re&&re.length){
                temp.push(list[i].id);
                //合并数组
                temp = temp.concat(re);
                return temp;
               }
            }
          }
        }
        

      }
      console.log(row,this.data,"raw");
        this.cat = getParent(row, this.data)
      this.dialogVisible = true;
      //安id获取分类
      GetCateGory(row)
      .then(res=>{
        this.info = res.data.data[0]
      })
    },
    getcategory() {
      GetCategory().then((res) => {
        this.data = res.data.list;
      });
    },
    // 选择发生变化
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleChange(value) {
      // 获取选择的节点列表
      var nodes = this.$refs.cas.getCheckedNodes()
      // 更新要添加的商品分类id与名称
      this.info.categoryId = nodes[0].value;
      this.info.cateName = nodes[0].label;
      console.log(nodes, value, '1122');

    },
  },
};
</script>
